<template>
    <div>
        <x-header>课程详情 </x-header> 
        <div class="cl_title">
            <i></i><span>{{item.subject}}</span>
            <hr style="border:0.5px solid #EEEEEE;margin:0;margin-top:15px;">
        </div>
        <div class="classname">
            <popup-radio class="cl_time" title="上课时间:" :options="options1" v-model="option1" @on-hide="optmsg"></popup-radio>
        </div>
        <div class="cl_maintain"><span>课程维护</span></div>
        <div class="maintain_list">
            <ul>
                <li class="m_del">
                    <p class="f_p">上课时间</p>
                    <p class="s_p">{{item.subclassinfo[num].time}}</p>
                    <hr style="border:0.5px solid #EEEEEE;margin:0;margin-top:5px;">   
                </li>
                 <li  class="m_del">
                    <p class="f_p">上课地点</p>
                     <p class="s_p">{{item.subclassinfo[num].address}}</p>
                    <hr style="border:0.5px solid #EEEEEE;margin:0;margin-top:5px;">     
                </li>
                 <li class="teacher">
                     <p >
                        <span class="lf lf_sp">讲师</span>
                        <img class="rt" :src="item.teacherimg" alt="" style="border-radius:12.5px;">
                        <span class="rt rt_sp">{{item.teacher}}</span> 
                    </p>
                     <hr style="border:0.5px solid #EEEEEE;margin:0;margin-top:5px;"> 
                </li>
                 <li class="teacher">
                     <p>
                        <span class="lf lf_sp">助教</span>
                         <img class="rt "  :src="item.assistantimg" alt="" style="border-radius:12.5px;">
                        <span class="rt rt_sp">{{item.assistant}}</span>  
                     </p>
                      <hr style="border:0.5px solid #EEEEEE;margin:0;margin-top:5px;"> 
                </li>
                 <li  class="m_del">
                    <p class="filepath">资料下载地址</p>
                    <p class="s_p">{{item.filepath}}</p>   
                </li>    
            </ul>
        </div>
        <div class="cl_maintain"><span>考勤情况</span></div> 
     
         <div class="checkall">
            <flexbox>
                <flexbox-item><div class="flex-demo">报名</div></flexbox-item>
                <flexbox-item><div class="flex-demo">请假</div></flexbox-item>
                <flexbox-item><div class="flex-demo">签到</div></flexbox-item>
                <flexbox-item><div class="flex-demo">未签到</div></flexbox-item>
            </flexbox>
            <flexbox style="margin-top:15px;margin-bottom:20px">
                <flexbox-item>
                    <div style="background:#C691FF"  class="flex-demo circle">{{attendence.applicants}}</div>
                </flexbox-item>
                <flexbox-item>
                    <div  style="background:#FFDC7D"  class="flex-demo circle">{{attendence.leavers}}</div>
                </flexbox-item>
                <flexbox-item>
                    <div  style="background:#FF9591"  class="flex-demo circle">{{attendence.signers}}</div>
                </flexbox-item>
                <flexbox-item>
                    <div  style="background:#E0E0E0"  class="flex-demo circle">{{attendence.unsigners}}</div>
                </flexbox-item>
            </flexbox>
             <hr style="border:0.5px solid #EEEEEE;margin:0;">
             <div class="two_btn">
                 <router-link :to="{path:'detail',query:{subclassid:subclassid}}"> 
                    <x-button mini   class="rt com2">查看详情</x-button>
                </router-link>
                <router-link :to="{path:'leave',query:{subclassid:subclassid}}"> 
                    <x-button mini class="rt com1" >请假</x-button>
                </router-link>   
             </div>
         </div>
        <div style="height:10px;background-color:#f2f2f2"></div>
        <div style="height:50px;margin-bottom:15px; background:#FFFFFF;">
            <router-link :to="{path:'classedit',query:{classid:classid,page:page}}" >
                <x-button mini  class="cl_change" >修改</x-button>
            </router-link>
            <x-button mini type="default"  class=" rt start_change" @click.native="del">删除</x-button>
        </div>
        <div v-show="popup" class="popup">
            <div class="popup_box">
                <div class="box_top">
                    <p>提示</p>
                    <p>{{tips}}</p>
                </div>
                <ul class="box_btn">
                    <li @click="cancel" class="cancel">取消</li>
                    <li @click="onfirm" class="onfilm">确认</li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
import {Confirm,XButton, XHeader,PopupRadio,FlexboxItem, Flexbox, XInput,XSwitch,TransferDomDirective as TransferDom } from 'vux'
import { mapActions, mapMutations, mapState } from 'vuex'

export default {
    data() {
        return {
            page:'classdet',
            subclassid:'',
            tips:'',
            popup:false,
            num:'',
            classid:this.$route.query.classid,
            option1: '',
            options1: [],
            index:'',
        }
    },
    directives: {
        TransferDom
    },
    components:{
        XHeader,
        XButton,
        XInput,
        XSwitch,
        Confirm,
        Flexbox,
        FlexboxItem,
        PopupRadio
    },
    created(){
        console.log(this.classid)
        this.getclassindex()
        this.item=this.allclassinfo[this.index]
        this.options();
        this.option1 = this.options1[0];
        this.init();
        this.optmsg(); 
    },
    computed: {
        attendence () {
            return this.$store.state.user.classattendence
        },
        allclassinfo(){
            return this.$store.state.user.publishclassinfo
        }      
    },
    methods:{
        ...mapActions({
            getClassAttendence:'getClassAttendence',
            dropCourse:'dropCourse'
        }),
        getclassindex(){
            var classinfo = this.$store.state.user.publishclassinfo
            for(var i=0;i<classinfo.length;i++){
                if(classinfo[i].classid==this.classid){
                    this.index=i
                }
            }
        },
        options(){
            var arr = [];
            var subclass = this.item.subclassinfo
            for(var i = 0; i < subclass.length; i++){
                arr.push(subclass[i].time)
            }
            this.options1 = arr
            return this.options1
            console.log('vux下拉框',this.options1)
        },
        init(){
            var subclassid = this.item.subclassinfo[0].subclassid
            console.log(subclassid)
            this.getClassAttendence({vue:this,subclassid:subclassid}).then(rs => {
                console.log("getPublishClass success")
            }).catch(error => {
                console.log(error)
            })
        },
        optmsg(){
            var arr = this.options1;
            var current = this.option1;
            var num1 = arr.indexOf(current)
            this.num = num1
            this.subclassid = this.item.subclassinfo[this.num].subclassid
            this.getClassAttendence({vue:this,subclassid:this.subclassid}).then(rs => {
                console.log("getPublishClass success")
            }).catch(error => {
                console.log(error)
            })
            console.log('subclassid'+this.subclassid)
        },
        del(){
            this.popup=true;
            this.tips = "是否确认删除"
        },
        cancel(){
            this.popup=false;
        },
        onfirm(){
            this.popup=false;
            var param1 = {'classid':this.item.classid}
            console.log("dropCourse param",param1)
            this.dropCourse({ vue: this, param: param1 }).then(rs => {
                console.log("success")
                this.$router.go(-1)
            }).catch(error => {
                console.log(error)
            }) 
        }
    }
}
</script>

<style scoped>
    .lf{
        float: left;
    }
    .rt{
        float: right;
    }
    .cl_title{
        height:45px;
        padding:15px 17.5px;

    }
    .cl_title i{
        display: inline-block;
        height: 12px;
        width:2.5px;
        background: #F25257;
        -webkit-transform: skew(10deg);
        -moz-transform: skew(10deg);
        -o-transform: skew(10deg); 
        transform: skew(10deg);
    }
    .cl_title span{
        height:15px;
        width:90px;
        margin-left:5px;
        font-size: 15px;
        font-family:  PingFangSC-Medium;
    }
    .classname{
        padding:10px 17.5px;

    }
    .classname .cl_time{
        padding:0;
        color:#5D5D5D;
        font-size: 13px;
        font-family:PingFangSC-Regular
    }
    .cl_maintain{
        height:27px;
        line-height: 27px;
        background: #F7F7F7;
    }
    .cl_maintain span{
        width:48px;
        height:12px;
        color:#A5A5A5;
        font-size:12px;
        margin-left:17.5px; 
    }
    .maintain_list{
        padding:0;
        padding-left:17.5px;
        padding-right: 17.5px;
    }
    .m_del{
        height:65.5px;
    }
     .f_p{
        height:15px;
        margin-top:20.5px;
        margin-bottom: 20px;
        font-size: 13px;
        color:#363636;
        font-family: PingFangSC-Regular
    }
     .s_p{
        height:25.5px;
        font-size: 15px;
        color:#A5A5A5;
        font-family:PingFangSC-Light;
        line-height: 25.5px;
        padding: 0
    }
    .filepath{
        height:15px;
        margin-top:20.5px;
        margin-bottom: 10px;
        font-size: 13px;
        color:#363636;
        font-family: PingFangSC-Regular
    }
    .teacher{
        height:50.5px;
        padding-top:20px;
    }
    .teacher p{
        height:25.5px;
    }
    .lf_sp{
        height:25.5px;
        line-height: 25.5px;
        font-size: 15px;
        color:#363636;
        font-family: PingFangSC-Regular

    }
    .rt_sp{
        height:25px;
        line-height: 25px;
        font-size: 10px;
        color:#A5A5A5;
        font-family:PingFangSC-Light;
        margin-right:5px;
    }
    .teacher img{
        width:25px;
        height:25px;
    }
    .checkall{
       padding:20px 25px 0px;
    }
    .flex-demo {
        text-align: center;
        color: #000;
        border-radius: 4px;
        background-clip: padding-box;
        font-size: 13px;
        font-family: PingFangSC-Regular;
        color:#363636;
    }
    .circle {  
        margin:0.1rem auto;
        color:#FFFFFF; 
        width: 41px;
        height: 41px;
        line-height: 41px;
        border-radius:20.5px;
        font-family: PingFangSC-Medium;
        font-size: 17px;
    } 
   .two_btn{
        height:41px;
   }
   .com1{
        height:21px;
        line-height: 21px;
        margin-top:10px;
        background:#FFFFFF;
        padding:0;
        min-width: 68px;
        border:0.5px solid #A5A5A5;
        color:#A5A5A5 ;
        margin-left: 15px;
   }
    .com2{
        height:21px;
        line-height: 21px;
        margin-top:10px;
        background:#FFFFFF;
        padding:0;
        min-width: 68px;
        border:0.5px solid #F25257;
        color:#F25257;
        margin-left: 15px;
   }
   .delete{
        width:28%;
        height:35px;
        margin-top:15px;
        margin-left:18%;
        border:0.5px solid #F25257;
        color:#F25257;
        background:#FFFFFF;
   }
   .change{
        width:28%;
        height:35px;
        margin-top:15px;
        margin-right:18%;
        border:0.5px solid #F25257;
        color:#FFFFFF;
        background:#F25257;
   }
   .start_change{
        width:28%;
        height:35px;
        margin-top:15px;
        margin-right: 18%;
        font-size: 14px;
        border:0.5px solid #F25257;
        color:#FFFFFF;
        background:#F25257;
   }
   .cl_change{
        width:28%;
        height:35px;
        margin-top:15px;
        margin-left:18%;
        font-size: 14px;
        border:0.5px solid #F25257;
        color:#F25257 ;
        background:#FFFFFF;
        font-size: 14px;
   }
   .popup{
       background: rgba(0,0,0,0.40);
       width:100%;
       height:100%;
       position: fixed;
       top:0;
       left:0;
   }
   .popup_box{
       width:245px;
       height:113px;
       background: #FFFFFF;
       border-radius: 24px;
       position:absolute;
       top:42%;
       left:17%;
   }
   .box_top p{
       text-align: center;
   }
   .box_top p:first-child{
        height:24px;
        line-height: 24px;
        font-size: 17px;
        font-family: PingFangSC-Medium;
        color:#363636;
        margin-top: 12.5px;
   }
   .box_top p:last-child{
       height:16.5px;
       line-height: 16.5px;
       font-size: 12px;
       font-family: PingFangSC-Regular;
       margin-top:2.5px;
       margin-bottom: 17.5px;
       color:#363636;
   }
   .box_btn{
        border-top: 1px solid #E8E8EB;
   }
   .box_btn li{
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        width:50%;
        float:left;
        text-align: center;
        height: 39px;
        line-height: 39px;
        font-size: 14px;
        font-family:PingFangSC-Regular;
   }
   .onfilm{
        color:#F25257;
   }
   .cancel{
        color:#2589FF;
        border-right: 0.5px solid #E8E8EB;
   }
</style>

